import React, { Component } from 'react'
import "../../common/common.css"
export default class Slot extends Component {
    render() {
        return (
            <div>
                <button className='returnButton'><a href="/">点击返回主菜单</a></button>
                <div className="explain">
                    <h2>如何向组件内部动态传入带内容的结构(标签)?</h2>
                    <p>
                        Vue中: <br />
                        使用slot技术, 也就是通过组件标签体传入结构
                        {`<AA>
                            <BB />
                        </AA>`}
                        <br />
                        React中: <br />
                        使用children props: 通过组件标签体传入结构 <br />
                        使用render props: 通过组件标签属性传入结构, 一般用render函数属性 <br />
                    </p>
                    <hr />

                    <h2>children props</h2>
                    {`
                    <A>
                        <B>xxxx</B>
                    </A>
                    {this.props.children}
                    `}
                    问题: 如果B组件需要A组件内的数据, 做不到
                    <h2>render props</h2>
                    {`
                    <A render={(data) => <C data={data}></C>}></A>
                    A组件: {this.props.render(内部state数据)}
                    C组件: 读取A组件传入的数据显示 {this.props.data}
                    `}
                    <hr />

                    <h2>组件说明</h2>
                    <p>
                        {`
                        <AA>
                            内容
                        </AA>
                        `}
                        这种情况标签内容在页面不能显示，但标签里面的内容并不是丢弃了，
                        在子组件的props里面可以看到有 "children: '内容' "这一项。
                        如果里面放的不是文字而是标签体组件呢？同样咋页面不显示，但是数据传达到了。
                        我们想让他进行显示,这就是插槽。这里我们用A组件作为父组件,B组件作为插槽的子组件。
                        父组件用this.props.render传递name值,子组件用this.props.name进行接收渲染到页面。
                        调用父组件的本组件Slot需要 {`<A render={(name) => <B name={name} />} />`}
                    </p>
                </div>
                <h3>我是Parent组件</h3>
                <C>内容</C>
                <C>
                    <B></B>
                </C>
                <A render={(name) => <B name={name} />} />
            </div>
        )
    }
}
class A extends Component {
    state = { name: 'tom' }
    render() {
        console.log(this.props);
        const { name } = this.state
        return (
            <div className="a">
                <h3>我是A组件</h3>
                {this.props.render(name)}
            </div>
        )
    }
}

class B extends Component {
    render() {
        console.log('B--render');
        return (
            <div className="b">
                <h3>我是B组件,{this.props.name}</h3>
            </div>
        )
    }
}

class C extends Component {
    render() {
        console.log(this.props);
        return (
            <div className="c">
                <h3>我是c组件</h3>
            </div>
        )
    }
}
